main {
  @apply flex
    w-full
    flex-col
    gap-6;

  hr {
    @apply w-full
      border-t
      border-t-neutral-200
      bg-white
      dark:border-t-neutral-900
      dark:bg-neutral-950;
  }

  h1 {
    @apply text-3xl;
  }

  h2 {
    @apply text-2xl;
  }

  h3 {
    @apply text-xl;
  }

  h4 {
    @apply text-lg;
  }

  h5,
  h6 {
    @apply text-base;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-semibold
      text-neutral-900
      dark:text-white;

    &[id] a {
      @apply text-neutral-900
        dark:text-white;
    }
  }

  strong {
    @apply font-semibold;
  }

  code {
    @apply font-ibm-plex-mono
      rounded-xs
      bg-neutral-100
      px-1
      text-base
      font-semibold
      text-neutral-900
      dark:bg-neutral-900
      dark:text-white;
  }

  p {
    @apply text-neutral-900
      dark:text-white;
  }

  /* link that isn't inside a heading */
  a:not(h1 > a):not(h2 > a):not(h3 > a):not(h4 > a):not(h5 > a):not(h6 > a),
  .anchor {
    @apply max-xs:font-semibold
      text-green-600
      dark:text-green-400;

    &:hover {
      @apply text-green-900
        dark:text-green-200;
    }

    &[role='button'] {
      @apply max-xs:font-regular;
    }

    &:has(code) {
      @apply max-xs:decoration-neutral-800
        dark:max-xs:decoration-neutral-200;

      code {
        @apply text-inherit;
      }
    }
  }

  ul {
    @apply list-disc
      pr-5
      pl-9
      leading-6
      text-neutral-900
      dark:text-white;

    li div:has(> pre) {
      @apply my-1!;
    }
  }

  ol {
    @apply list-decimal
      px-5
      leading-6
      text-neutral-900
      dark:text-white;

    li div:has(> pre) {
      @apply my-1!;
    }
  }

  table {
    @apply mb-1
      w-full
      border-separate
      border-spacing-0
      rounded-xs
      border
      border-neutral-200
      text-left
      text-sm
      dark:border-neutral-800;

    /* Common border and text styles */
    th,
    td {
      @apply border
        border-t-0
        border-r-0
        border-neutral-200
        px-4
        py-2
        break-words
        text-neutral-900
        dark:border-neutral-800
        dark:text-white;

      a + a {
        @apply mr-2;
      }
    }

    th {
      @apply font-semibold;
    }

    tr:last-child > td {
      @apply sm:border-b-0;

      &:last-child {
        @apply max-xs:border-b-0;
      }
    }

    td:first-child,
    th:first-child {
      @apply sm:border-l-0;
    }
  }

  /* Mobile-specific styles */
  @media (max-width: 40rem) {
    table:not([data-cards='false']) {
      @apply block
        border-0;

      thead {
        @apply sr-only;
      }

      tbody {
        @apply block
          space-y-4;
      }

      tr {
        @apply block
          rounded-xs
          border
          border-neutral-200
          p-4
          before:mb-2
          before:text-sm
          before:font-medium
          before:text-neutral-500
          before:content-[attr(data-label)]
          dark:border-neutral-800
          dark:before:text-neutral-400;
      }

      td {
        @apply relative
          block
          border-0
          border-b
          px-0
          py-2
          pl-[33%]
          text-right
          text-neutral-600
          before:absolute
          before:top-1/2
          before:left-0
          before:w-1/3
          before:-translate-y-1/2
          before:text-left
          before:font-medium
          before:break-words
          before:text-neutral-700
          before:content-[attr(data-label)]
          last:border-0
          dark:border-neutral-900
          dark:text-neutral-300
          dark:before:text-neutral-200;
      }

      td div {
        @apply justify-end;
      }
    }
  }
}
